<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" :circular="true">
			<!-- 	<swiper-item v-for="(item, i) in swiperList" :key="i">
				<view class="swiper-item">
					<image :src="item.image_src"></image>
				</view>
			</swiper-item> -->
			<swiper-item>
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/首页轮播1.jpeg"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/首页轮播2.jpeg"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/首页轮播3.jpeg"></image>
			</swiper-item>
		</swiper>
		<view class="container">
			<template>
				<view class="nav">
					<u-notice-bar mode="horizontal" :is-circular="false" :list="list"></u-notice-bar>
				</view>
			</template>
			<template>
				<view class="search">
					<u-search placeholder="请输入搜索关键字" v-model="keyword" shape="square" :show-action="false"
						search="search()"></u-search>
				</view>
			</template>
			<template>
				<u-card :title="title" :sub-title="subTitle" :thumb="thumb"  margin="20rpx" :border="false" >
					<view class="" slot="body">
						<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
							<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
							<image
								src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
								mode="aspectFill"></image>
						</view>
						<view class="u-body-item u-flex u-row-between u-p-b-0">
							<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
							<image
								src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg"
								mode="aspectFill"></image>
						</view>
						<view class="u-body-item u-flex u-row-between u-p-b-0">
							<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
							<image
								src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg"
								mode="aspectFill"></image>
						</view>
						<view class="u-body-item u-flex u-row-between u-p-b-0">
							<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
							<image
								src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="" slot="foot">
						<u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon>
					</view>
				</u-card>
			</template>
		</view>



	</view>

</template>

<script>
	export default {
		data() {
			return {
				//轮播图的数据列表
				swiperList: [],
				keyword: '',
				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				title: '素胚勾勒出青花，笔锋浓转淡',
				subTitle: '2020-05-15',
				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
			}
		},
		onLoad() {
			//调用方法获取轮播图数据
			// this.getSwiperList();
		},
		methods: {
			async search() {

			},
			async getSwiperList() {
				const {
					data: res
				} = await uni.$http.get('')
				if (res.meta.status !== 200) {
					return uni.showToast({
						title: "数据请求失败！",
						duration: 1200,
						icon: 'none'
					})
				}
				this.swiperList = res.message
			}
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 330rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.search {
		width: 50%;
		margin-left: 380rpx;
		display: flex;
		margin-top: 10rpx;
	}

	.nav {
		height: 10%;
	}
	
	.container {
		margin: 15rpx;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>
